<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_行高.html</title>
    <style>
        div{

            /* 通常可以将高度与行高设置成一样，将元素的文字设置成垂直居中 */
            height: 200px;
            line-height: 200px;

            font-size: 50px;
            /*
                行高（line-height）：指文字所占用的实际高度
                可以通过line-height来设置行高
                    行高可以指定一个具体的数值：px或em等
                    也可以直接为行高设置为一个整数
                        如果是一个整数，则行高将会是字体指定的倍数
                行高经常用来设置文字的行间距
                
                字体框
                    - 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
            */
            border: 1px red solid;
            /* line-height: 1; */
        }
    </style>
</head>
<body>
    <div>今天天气真不错！Hello hello</div>
</body>
</html>